<template>
  <div style="width:100%">
    <div v-if="formType == 'add'" :value="modelValue">
      <ImageUpload @onChange="addOnChange" :action="props.action"></ImageUpload>
    </div>
    <!-- 编辑 -->
    <div v-if="formType == 'edit'" style="width:100%">
      <div class="orgfile_warp" v-if="state.orgFile.length">
        <div class="orgfile">
          <div class="edit_orgfile" v-for="(item, index) in state.orgFile" :key="index">
            <el-image style="width:150px;" :src="item.attachUrl" ></el-image>
            <div class="edit_img_btn">
              <el-icon @click="showBig(item.attachUrl)" style="margin-right: 10px">
                <ZoomIn />
              </el-icon>
              <el-icon @click="deleteOrgFile(item, index)" style="margin-right:10px;">
                <Close />
              </el-icon>
            </div>
          </div>
        </div>
      </div>
      <ImageUpload @onChange="editOnChange" :action="props.action"></ImageUpload>
    </div>
    <!-- 查看 -->
    <div v-if="formType == 'show'" style="width:100%">
      <div class="orgfile_warp">
        <div class="orgfile"  v-if="state.orgFile.length">
          <div class="show_img_item" v-for="(item, index) in state.orgFile" :key="index">
            <el-image style="width:150px;margin-right:10px;" :src="item.attachUrl" :title="item.attachName"></el-image>
            <div class="edit_pic_contor">
              <el-icon @click="showBig(item.attachUrl)" style="margin-right: 10px">
                <Search />
              </el-icon>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- 大图展示 -->
  <div class="demo-image__preview" v-if="state.showBigImage" @click.self="state.showBigImage = false">
    <el-image :src="state.bigImagUrl" fit="cover"></el-image>
  </div>
</template>

<script setup>
import { watchEffect, reactive } from 'vue'
import ImageUpload from '_c/fileUpload/imageUpload.vue'
import { Close,ZoomIn, Search } from '@element-plus/icons'
import { ElMessageBox } from 'element-plus' 
const state = reactive({
  file: [],
  orgFile: [],
  firstLoad: true,
  showBigImage: false,
  bigImagUrl: ''
})
const props = defineProps({
  modelValue: {
    type: [Array],
    default () {
      return []
    }
  },
  action: {
    type: String,
  },
  formType: {
    type: String,
    default () {
      return 'add'
    }
  },
})
const showBig = (info) => {
  state.showBigImage = true
  state.bigImagUrl = info
}
const emit = defineEmits(['update:modelValue','change'])
// 
const deleteOrgFile = (info, index) => {
  ElMessageBox.confirm(`确定移除当前文件？`).then(() => {
    state.orgFile.splice(index, 1)
    let res = state.file.concat(state.orgFile)
    emit('update:modelValue', res)
    emit('change', res)
  });
}
const editOnChange = (file) => {
  if (file instanceof Array && file.length) {
    let res = file.concat(state.orgFile)
    state.file = res
    emit('update:modelValue', res)
    emit('change', res)
  }
}
const addOnChange = (file) => {
  if (file.length) {
    emit('update:modelValue', file)
    emit('change', file)
  }
}
watchEffect(() => {
  if ((props.formType == 'edit' || props.formType == 'show') && props.modelValue.length) {
    let res = props.modelValue.filter((item) => {
      if(!item) return
      if (item.showinOrgList) return true
      else {
        if (!item.uid) {
          return true
        }
      }
    })
    state.orgFile = res
  }
});

</script>

<style lang="scss" scoped>
.show_img_item {
  position: relative;

  .edit_pic_contor {
    width: 0;
    height: 0;
    position: absolute;
    z-index: 1;
    left: 0;
    top: 0;
    display: none;
    font-size: 20px;
    text-align: center;
    line-height: 120px;
    overflow: hidden;
  }


  &:hover {
    .edit_pic_contor {
      background-color: rgba(0, 0, 0, 0.5);
      color: #fff;
      width: 100%;
      height: 100%;
      border-radius: 10px;
      text-align: center;
      display: flex;
      justify-content: center;
      flex-direction: row;
      align-items: center;
    }
  }


}

.orgfile_warp {
  padding-bottom: 10px;

  ::v-deep(.el-icon) {
    line-height: 28px;
    margin-left: 10px;
    height: auto;
    cursor: pointer;
    display: inline-block;

    &:hover {
      color: var(--el-color-primary);
    }
  }
}

.orgfile {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  line-height: 25px;
  padding-top: 20px;
  flex-wrap: wrap;
  align-items: center;
}

.edit_orgfile {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  line-height: 25px;
  width:150px;
  height:150px;
  position: relative;
  margin-bottom:20px;
  .edit_img_btn{
    position: absolute;
    width:100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.2);
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 28px;

  }
  &:hover .edit_img_btn{
   display: flex;
  }
}

.demo-image__preview {
  position: fixed;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5);
  left: 0;
  top: 0;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  z-index: 1000;

  ::v-deep(.el-image) {
    max-width: 70%;
  }
}
</style>